<html>
    <head>
        <title>深入研究数据对象</title>
    </head>
    <body>
        <script>
             // 1、深入数据对象
                                /*
                                    有一点要注意： 正如 v-bind:class 和 v-bind:style 这样的指令在模板与语法中被特别对待一样，
                                    它们在VNode数据对象中也有对应的顶层字段。该对象也允许你绑定普通的HMTL attribute(标签属性)，
                                    也许绑定如 innerHTML 这样的DOM property (这会覆盖v-html指令)
                                */

                                    // 数据对象
                                    {
                                            // 与 'v-bind:class' 的API相同，接受一个字符串、对象 或者对象组成的数组
                                            class:{
                                                foo:true,
                                                bar:false
                                            },

                                            // 与 'v-bind:style'的API相同，接受一个对象、数组，或对象数组
                                            style:{
                                                color:'red',
                                                fontSize:'14px'
                                            },

                                            //  普通的HTML attribure(标签属性)
                                            attrs:{
                                                id:'foo'
                                            },

                                            // 组件 prop
                                            props:{
                                                myProp:'bar'
                                            },

                                            // DOM property(DOM 属性)
                                            domProps:{
                                                innerHTML:'baz'
                                            },

                                            /*
                                                事件监听器
                                                在 'on' 内。
                                                但不再支持如 'v-on:keyup.enter'这样的修饰符。
                                                需要在处理函数中手动检查keyCode.
                                            */ 
                                            on:{
                                                click:this.nativeClickHandler
                                            },

                                            /*
                                                自定义指令。
                                                注意： 你无法对 'binding'钩子函数中的 oldValue参数进行赋值，因为Vue已经自动为你进行了同步！
                                            */ 
                                            directives:[
                                                {
                                                    name:'my-coustom-directive',
                                                    value:'2',
                                                    experession:'1+1',
                                                    arg:'foo',
                                                    modifiers:{
                                                        bar:true
                                                    }
                                                }
                                            ],

                                            /*
                                                作用域插槽
                                                格式为：  {name: props=> createElement('span',props.text)}
                                            */
                                            scopedSlots:{
                                                default:props=> createElement('span',props.text)
                                            },

                                            // 如果组件是其他组件的子组件，需为插槽指定名称
                                            slot:'name-of-slot',

                                            // 其他特殊顶层属性
                                            key:'myKey',
                                            ref:'myRef',
                                            /*
                                                如果你在渲染函数中给多个元素都应用了相同的 ref 名
                                                那么 '$refs.myRef'  会变成一个数组
                                            */ 

                                            refInFor:true
                                    }
        </script>
    </body>
</html>